<!-- src/views/AccountAppeal.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">提交账号申诉</CardTitle>
      </CardHeader>
      <CardContent>
        <form @submit.prevent="submitAppeal" class="space-y-4">
          <div>
            <Label for="appealType">申诉类型</Label>
            <Select v-model="appealType">
              <option value="">请选择申诉类型</option>
              <option value="账号被盗">账号被盗</option>
              <option value="账号被封禁">账号被封禁</option>
              <option value="无法登录">无法登录</option>
              <option value="其他问题">其他问题</option>
            </Select>
          </div>
          <div>
            <Label for="description">详细描述</Label>
            <Textarea v-model="description" placeholder="请详细描述你遇到的问题" rows="4" />
          </div>
          <div>
            <Label for="contactInfo">联系方式</Label>
            <Input v-model="contactInfo" placeholder="请留下你的联系方式，以便我们联系你" />
          </div>
          <div>
            <Label for="evidence">上传证明材料（可选）</Label>
            <Input type="file" @change="handleFileUpload" />
          </div>
          <Button type="submit">提交申诉</Button>
        </form>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent
} from '@/components/ui/card'

import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

const appealType = ref("");
const description = ref("");
const contactInfo = ref("");
const evidenceFile = ref<File | null>(null);

const handleFileUpload = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files) {
    evidenceFile.value = target.files[0];
  }
};

const submitAppeal = () => {
  // 在这里添加提交申诉的逻辑
  console.log("提交申诉", {
    appealType: appealType.value,
    description: description.value,
    contactInfo: contactInfo.value,
    evidenceFile: evidenceFile.value,
  });
  // 重置表单
  appealType.value = "";
  description.value = "";
  contactInfo.value = "";
  evidenceFile.value = null;
};
</script>
